<template>
  <div class="paid-list">

    <el-breadcrumb v-if="$route.query.devId" separator="/" class="bread-title">
      <el-breadcrumb-item :to="{ path: '/searchsettle' }">结算查询</el-breadcrumb-item>
      <el-breadcrumb-item>待支付清单</el-breadcrumb-item>
    </el-breadcrumb>

    <el-form ref="ruleForm" :inline="true" :model="params" class="demo-form-inline" style="margin-bottom:15px;">
      <div class="tabs">
        <el-button size="small" :type="active == 1 ? 'primary' : 'default' " @click="btnClick(1)">全部(<span class="span" :class="active==1 ? 'active': '' ">{{selectData.total}}</span>)</el-button>
        <el-button size="small" :type="active == 2 ? 'primary' : 'default' " @click="btnClick(2)">已付款(<span class="span" :class="active==2 ? 'active': '' ">{{selectData.paySuccess}}</span>)</el-button>
        <el-button size="small" :type="active == 3 ? 'primary' : 'default' " @click="btnClick(3)">未付款(<span class="span" :class="active==3 ? 'active': '' ">{{selectData.unPay}}</span>)</el-button>
        <el-button size="small" :type="active == 6 ? 'primary' : 'default' " @click="btnClick(6)">审批失败(<span class="span" :class="active==6 ? 'active': '' ">{{selectData.verifyReject}}</span>)</el-button>
        <el-button size="small" :type="active == 4 ? 'primary' : 'default' " @click="btnClick(4)">推送失败(<span class="span" :class="active==4 ? 'active': '' ">{{selectData.pushFail}}</span>)</el-button>
        <el-button size="small" :type="active == 5 ? 'primary' : 'default' " @click="btnClick(5)">支付失败(<span class="span" :class="active==5 ? 'active': '' ">{{selectData.payFail}}</span>)</el-button>
        <el-button size="small" :type="active == 7 ? 'primary' : 'default' " @click="btnClick(7)">支付超期预警(<span class="span" :class="active==7 ? 'active': '' ">{{selectData.payTimeOut}}</span>)</el-button>
      </div>
      <el-form-item label="付款单ID：">
        <el-input size="small" v-model.trim="params.code" placeholder="请输入付款单ID"></el-input>
      </el-form-item>
      <el-form-item label="项目：">
        <el-input size="small" v-model.trim="params.projectName" placeholder="请输入项目名称"></el-input>
      </el-form-item>
      <el-form-item label="付款用途：">
        <el-select size="small" v-model="params.type">
          <el-option v-for="item in types" :label="item.label" :key="item.value" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="银行卡号：">
        <el-input v-model.trim="params.bankNo" placeholder="请输入收款方的银行卡号"></el-input>
      </el-form-item> -->
      <el-form-item label="付款方：">
        <el-input size="small" v-model.trim="params.paymentName" placeholder="请输入付款方名称"></el-input>
      </el-form-item>
      <el-form-item label="收款方：">
        <el-input size="small" v-model.trim="params.name" placeholder="请输入收款人/收款公司"></el-input>
      </el-form-item>
      <el-form-item label="支付状态：">
        <el-select size="small" v-model="payStatus1" :disabled="this.active != 1 && this.active != 4 && this.active != 6">
          <el-option v-for="item in payStatuss" :label="item.label" :key="item.value" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="推送状态：">
        <el-select size="small" v-model="params.pushStatus" :disabled="this.active==4">
          <el-option v-for="item in pushStatuss" :label="item.label" :key="item.value" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="摘要：">
        <el-input size="small" v-model.trim="params.summary" placeholder="请输入摘要"></el-input>
      </el-form-item>
      <div :style="{display:moreselects?'inline':'none'}">
        <el-form-item label="支付清单状态：">
          <el-select size="small" v-model="params.verifyStatus">
            <el-option v-for="item in verifyStatuss" :label="item.label" :key="item.value" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付清单编号：">
          <el-input size="small" v-model.trim="params.payInventoryCode" placeholder="支付清单编号"></el-input>
        </el-form-item>
        <el-form-item label="结算单ID：">
          <el-input size="small" v-model.trim="params.settlementId" placeholder="请输入结算单ID"></el-input>
        </el-form-item>
        <el-form-item label="实际支付金额：">
          <el-input size="small" v-model.trim="params.minPayAmount" placeholder="最小值" style="width:150px;"></el-input>
          -
          <el-input size="small" v-model.trim="params.maxPayAmount" placeholder="最大值"  style="width:150px;" ></el-input>
        </el-form-item>
        <el-form-item label="收款方角色：">
          <el-select size="small" v-model="params.mainBodyType">
            <el-option v-for="item in receiveRoles" :label="item.label" :key="item.value" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <el-button size="small" type="primary" @click="query" id="monitorEnter">查询</el-button>
      <el-button size="small" type="default" @click="resetForm">重置</el-button>
      <el-button size="small" type="default" @click="moreselect">{{moreselects?"收起":"更多"}}</el-button>
      <div style="margin-top: 15px;">
          <el-button size="small" type="primary" @click="batchPay">支付清单生成且发起审批</el-button>
          <el-button size="small" type="primary" @click="batchExport(1)">导出查询数据</el-button>
          <el-button size="small" type="primary" @click="batchExport(2)">导出全部</el-button>
      </div>
    </el-form>
    <div class="selectItem" v-if="selectArr.length">
      <i class="el-icon-warning" style="color:#409eff;"></i>
      已选择 <span>{{selectTotal}}</span> 项数据,付款额合计为 <span>{{selectMoney}} </span>元。
    </div>



    <el-table size="small" :data="tableData" v-loading="loading" border @selection-change="handleSelectionChange" :row-class-name="tableRowClassName" @sort-change='tableSortChange' :span-method="arraySpanMethod">
      <el-table-column type="selection" width="80" align="center" :selectable="selectInit"></el-table-column>
      <el-table-column type="index"  width="50" label="序号" align="center" :index="indexFun"></el-table-column>
      <el-table-column width="120" prop="code" label="付款单ID" align="center"></el-table-column>
      <el-table-column width="190" label="结算单ID" align="center">
        <template slot-scope="scope">
              <el-button type="text" v-if="scope.$index!=0" size="small" @click="jumpBroker(scope.row.pushType,scope.row.requestCode)">{{scope.row.requestCode}}</el-button>
              <el-button type="text"  v-if="scope.$index==0" size="small" style="color:#606266;">——</el-button>
          </template>
      </el-table-column>
      <el-table-column width="120" prop="summary" label="摘要(付款事项)" align="center" ></el-table-column>
      <el-table-column width="120" prop="projectName" label="项目" align="center" ></el-table-column>
      <el-table-column width="120" prop="amount" label="含税金额(元)" align="center" :formatter="toFixedFn"></el-table-column>
      <el-table-column width="120" prop="payAmount" label="实际付款金额(元)" align="center" :formatter="toFixedFn"></el-table-column>
      <el-table-column width="120" prop="payType" label="付款用途" align="center" :formatter="initCategory"></el-table-column>
      <el-table-column width="120" prop="paymentName" label="付款方" align="center">
         <template slot-scope="scope">
                <el-button type="text"  v-if="scope.$index==0" size="small" style="color:#606266;">——</el-button>
         <div v-else>{{scope.row.paymentName}}<span v-if="scope.row.paymentSystem==2" class="crux">【E-Bill付款】</span></div>
        </template>
      </el-table-column>
      <el-table-column label="收款信息" align="center">
        <el-table-column width="120" prop="recName" label="收款方" align="center"></el-table-column>
        <el-table-column width="120" prop="recAccNo" label="银行卡号" align="center"></el-table-column>
        <el-table-column width="120" prop="recBankName" label="开户行" align="center"></el-table-column>
      </el-table-column>



      <el-table-column width="120" prop="verifyStatus" label="支付清单状态" align="center" :formatter="initVerifyStatus">
        <template slot-scope="scope">
              <el-button type="text"  v-if="scope.$index==0||scope.row.paymentSystem==2" size="small" style="color:#606266;">——</el-button>
              <el-button type="text" v-else size='small' style="color:#606266;">{{initVerifyStatus(null,null,scope.row.verifyStatus)}}</el-button>
          </template>
      </el-table-column>



      <el-table-column width="148" label="支付清单编号" align="center">
          <template slot-scope="scope">
              <el-button type="text" v-if="scope.$index!=0" size="small" style="color:@606266;" @click="jumpSerach(scope.row.payInventoryCode)">
                {{scope.row.payInventoryCode}} 
                </el-button>
              <el-button type="text"  v-if="scope.$index==0" size="small" style="color:#606266;">——</el-button>
              <el-button type="text"  v-if="scope.row.paymentSystem==2" size="small" style="color:#606266;">——</el-button>
          </template>
      </el-table-column>



      <el-table-column width="120" prop="payStatus" label="支付状态" align="center" :formatter="initPayStatus"></el-table-column>
      <el-table-column width="120" prop="pushStatus" label="推送EAS状态" align="center" :formatter="initPushStatus"></el-table-column>
      <el-table-column width="120" prop="remark" label="备注" align="center"></el-table-column>
      <el-table-column width="120" prop="userName" label="操作人" align="center"></el-table-column>
      <el-table-column width="180" prop="updateTime" label="操作时间" align="center" :formatter="initTime" sortable="custom" :sort-orders="['ascending', 'descending']"></el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="180">
        <template slot-scope="scope">
          <el-button type="text"  v-if="scope.$index!=0" size="small" @click="orderdetail(scope.row.id)">详情</el-button>
           <el-button type="text"  v-if="scope.$index!=0&&scope.row.paymentSystem!=2"   size="small" :disabled="scope.row.payInventoryCode ? false : true" @click="lookPro(scope.row.payInventoryCode)">查看流程</el-button>
          <el-button type="text" @click="jumpConfirm(scope.row.code)"  v-if="scope.$index!=0&&scope.row.paymentSystem!=2" size="small" :disabled="scope.row.payStatus==1||scope.row.payStatus==3">确认支付结果</el-button>
          <el-button type="text"  v-if="scope.$index==0" size="small" style="color:#606266;">——</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.pageNum" :page-sizes="[10,30,50,100]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" style="margin-top:30px;">
    </el-pagination>
  </div>
</template>
<script>
import utils from "../../../../common/utils"
import api from '@/api/apiPath'
export default {
  name: 'tobepaidlist',
  title:'待支付清单',
  data() {
    return {
      moreselects:false,
      active: 1,
      codess:[],
      payTypesss:[],
      receiveRoles:[
        {label: "全部", value: 0 },{label: "经纪公司", value: 3 },{label: "经纪人", value: 2 },{label: "网络推客", value: 1 },{label: "购房者", value: 4 },
        {label: "返还款-公司", value: 8 },{label: "返还款-个人", value: 9 }
      ],
      types: [ //付款用途
        { label: "全部", value: 0 }, { label: "支付佣金", value: 1 }, { label: "电商费退款", value: 2 }, { label: "跟投分红", value: 3 }, { label: "开发商返还款", value: 4 },
        { label: "经纪人奖励", value: 5 }, { label: "支付团奖", value: 6 }
      ],
      payStatuss: [ //支付状态
        { label: "全部", value: 0 }, { label: "待支付", value: 1 }, { label: "支付中", value: 2 }, { label: "支付成功", value: 3 }, { label: "支付失败", value: 4 }
      ],
      pushStatuss: [ //推送状态
        { label: "全部", value: -1 }, { label: "未推送", value: 0 }, { label: "已推送", value: 1 }, { label: "推送失败", value: 2 }
      ],
      verifyStatuss:[
        { label: "全部", value: "" }, { label: "未生成", value: 1 }, { label: "审批中", value: 2 }, { label: "审批完成", value: 3 }, { label: "审批失败", value: 4 }
      ],//支付清单状态
      selectData: {
        pushFail: "", //推送失败
        payFail: "", //付款失败
        unPay: "", //未付款
        total: "", //全部
        paySuccess: "", //已付款
      },
      selectArr: [], //选中的记录
      selectTotal: "", //选中几条
      selectMoney: "", //选中的总钱数
      tableData: [],
      loading: false,
      payStatus1: 0,
      tabpushstatus: "",
      params: {
        paymentName:"",//付款方
        minPayAmount:"",//最小值
        maxPayAmount:"",//最大值
        mainBodyType:0,//收款方角色
        settlementId:"",//结算单ID
        code: this.$route.params.code || "", //付款单ID  
        projectName:"",//项目
        type: 0, //付款用途
        bankNo: "", //银行卡号
        name: "", //收款方
        remark:"",//摘要
        payStatus: [], //支付状态
        pushStatus: -1, //推送状态
        verifyStatus:"",//支付清单状态
        payInventoryCode: "",//支付清单编号
        sort: "DESC", //DESC-倒序 ASC-正序
        summary:"",//摘要
        devId: "",
        pushType: "",
        pageNum: 1,
        pageSize: 10,
        all:""//导出时需要此参数
      },
      expendSides: [], //支出方
      paymentAccNos: [], //账户集合
      params1: {
        id: "",
        paymentAccNo: "",
        paymentBankName: "",
        paymentId: "",
        paymentName: ""
      },
      total: 0
    }
  },
  methods: {
    jumpConfirm(code){
      this.$router.push({
        path:"/confirmpayresult",
        query:{
          code:code
        }
      })
    },
     lookPro(data){
        this.$router.push({
            path: "/payordercheck",
            query: {
                code:data,
                type:"look",
                source:"list"
            }
        })
    },
    indexFun(index){
      if(index===0){
        return "合计"
      }
      return index
      console.log(columnIndex)
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }){
      if(rowIndex===0){
        if(columnIndex===0){
          return [0,0]
        }else if(columnIndex===1){
          return [1,2]
        }
      }
    },
    moreselect(){
      this.moreselects=!this.moreselects
    },
    jumpBroker(type,code){
      if(type==6){//网络推客
        this.$router.push({
            name: "internetTwitter",
            params: {
                code:code
            }
        })
      }
      if(type==7){//经纪公司
        this.$router.push({
            name: "brokerCompany",
            query: {
                code:code
            }
        })
      }
      if(type==8){//经纪人
        this.$router.push({
            name: "brokerCommission",
            params: {
                code:code
            }
        })
      }
      if(type==11){//返还款支付列表
        this.$router.push({
            name: "developerPayment",
            params: {
                code:code
            }
        })
      }
    },
    jumpSerach(val){
        this.$router.push({
            path: "/settlesearch",
            query: {
                payOrder:val
            }
        })
    },
    batchExport(type){
      let all="";
      if(type==1){
        all=false;
      }else{
        all=true;

      }
      window.open(`${this.$axios.baseURL}/kingdee/api/export?code=${this.params.code}&projectName=${this.params.projectName}&payStatus=${this.params.payStatus}&type=${this.params.type}&bankNo=${this.params.bankNo}&name=${this.params.name}&pushStatus=${this.params.pushStatus}&summary=${this.params.summary}&verifyStatus=${this.params.verifyStatus}&payInventoryCode=${this.params.payInventoryCode}&all=${all}`)
    },
    laodTabData() {
      this.axios.post(api.TABCOUNT).then((res) => {


        if (res.data.code == 200) {
          this.selectData = res.data.data;
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    listData() {
      this.axios.post(api.PAYLIST, this.params).then((res) => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.list;
          this.total = res.data.data.total;
          let obj={
            amount: 288,
            amountWithoutTax: 274.29,
            applier: "",
            applierPhone: "",
            bankPayTime: null,
            blocType: 6,
            cityCode: "",
            cityName: "",
            code: "",
            createTime: 1574758525000,
            devId: "",
            devName: "",
            enclosureUrl: null,
            endTime: null,
            extend: null,
            fee: 0,
            id: 302,
            lkPerson: "",
            lkPersonPhone: "",
            mainBodyType: 2,
            payAmount: 274.29,
            payInventoryCode: null,
            payStatus: 1,
            payTime: null,
            payType: 1,
            paymentAccNo: "",
            paymentBankName: "",
            paymentCode: "",
            paymentId: 173,
            paymentName: "",
            paymentTaxpayerNumber: "",
            projectName: "",
            purpose: "",
            pushStatus: 0,
            pushTime: null,
            pushType: 8,
            recAccNo: "",
            recBankName: "",
            recCityName: "",
            recId: 48,
            recIdCard: "",
            recLinkNumber: "",
            recName: "",
            recOpenCode: "",
            recProvinceName: "",
            recSubBankName: "",
            remark: null,
            requestCode: "",
            settlementType: "",
            summary: "",
            tax: 13.71,
            taxRate: 0.05,
            updateTime: 1574758525000,
            userId: null,
            userName: "",
            verifyStatus: 1,
            verifyStatusText: null,
            verifyTime: null
          }
          for(let item in obj){
            if(item == "amount"){
              let tempVal=this.fnTofixed(res.data.data.dataTotal.totalAmount);
              obj[item]=tempVal
            }else if(item == "payAmount"){
              let tempVal=this.fnTofixed(res.data.data.dataTotal.totalPayAmount);
              obj[item]=tempVal
            }else{
              obj[item]="——"
            }
          }
          if(res.data.data.list.length != 0){
            this.tableData.unshift(obj);
          }
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    tableRowClassName({ row }) {
      if (row.paymentStatus == 4 || row.pushStatus == 2) {
        return 'warning-row';
      }
      return ""
    },
    warn(msg) {
      this.$alert(msg, '提示', {
        type: 'error',
        confirmButtonText: '确定',
        callback: action => {}
      });
    },
    fnTofixed(val){
      if (val != undefined && val != null && val.toString() != "") {
        if(!isNaN(Number(val))){
          let tempValue = parseFloat(val)
          return tempValue.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }else{
          return val
        }
      }
    },
    toFixedFn(row, column, cellValue, index) { //保留两位小数并且千分位展示
      if (cellValue != undefined && cellValue != null && cellValue.toString() != "") {
        if(!isNaN(Number(cellValue))){
          let tempValue = parseFloat(cellValue)
          return tempValue.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }else{
          return cellValue
        }
      }
    },
    btnClick(val) {
      this.active = val;
      this.params.payStatus = [];
      this.payStatus1=0;
      if (this.active == 2) {
        this.params.payStatus.push(3)
      }
      if (this.active == 3) {
        this.params.payStatus.push(1, 2, 4, 5)
      }
      if (this.active == 4) {
        this.params.pushStatus = 2;
      }
      if (this.active == 5) {
        this.params.payStatus.push(4)
      }
      if(this.active==6){
        this.params.verifyStatus=4
      }
      if(this.active==7){
        this.params.payStatus.push(5)
      }
      if (this.active != 4) {
        this.params.pushStatus = "";
      }
      if(this.active != 6){
        this.params.verifyStatus="";
      }
      this.params.devId = "";
      this.params.pushType = "";
      this.params.pageNum=1;
      this.listData();
    },
    query() {
        this.params.payStatus=[];
        if (this.active == 2) {
          this.params.payStatus.push(3)
        }
        if (this.active == 3) {
          this.params.payStatus.push(1, 2, 4, 5)
        }
        if (this.active == 5) {
          this.params.payStatus.push(4)
        }
        if(this.active==7){
          this.params.payStatus.push(5)
        }
        if(this.payStatus1 != 0){
          if(this.payStatus1 == 2){
            this.params.payStatus.push(this.payStatus1,5,6);
          }else{
            this.params.payStatus.push(this.payStatus1);
          }
        }
        this.params.pageNum=1;
        this.listData();
    },
    resetForm() {
      this.params.minPayAmount="";
      this.params.maxPayAmount="";
      this.params.mainBodyType=0;
      this.params.paymentName="";
      this.params.settlementId="";
      this.params.pageNum=1;
      this.params.code = "";
      this.params.projectName="";
      this.params.type = 0;
      this.params.bankNo = "";
      this.params.name = "";
      this.params.payStatus = [];
      this.params.devId = "";
      this.params.pushType = "";
      this.params.pushStatus = -1;
      this.params.sort = "DESC";
      this.params.summary="";
      this.params.payInventoryCode="";
      this.params.verifyStatus="";
      this.payStatus1=0;
      this.listData();
    },
    handleSelectionChange(val) {
      let sum = 0;
      this.codess=[];
      this.selectArr = val;
      this.payTypesss=[];
      this.selectTotal = val.length;
      for (let i = 0; i < val.length; i++) {
        sum += parseFloat(val[i].amount)
        this.codess.push(val[i].code);
        this.payTypesss.push(val[i].payType);
      }
      this.selectMoney = sum;
    },
    handleSizeChange(val) {
      this.params.pageSize = val;
      this.listData();
    },
    handleCurrentChange(val) {
      this.params.pageNum = val;
      this.listData();
    },
    initCategory(row, column, cellValue, index) {
      switch(cellValue){
        case 1:
          return "支付佣金"
        case 2:
          return "电商费退款"
        case 3:
          return "跟投分红"
        case 4:
          return "开发商返还款"
        case 5:
          return "经纪人奖励"
        case 6:
          return "支付团奖"
        default:
          return cellValue
      }
    },
    initPayStatus(row, column, cellValue, index) {
      switch(cellValue){
        case 1:
          return "待支付"
        case 2:
        case 5: 
          return "支付中"
        case 3:
          return "支付成功"
        case 4:
          return "支付失败"
        case 6:
          return "交易未确认"
        default:
          return cellValue
      }
    },
    initPushStatus(row, column, cellValue, index) {
      switch(cellValue){
        case 0:
          return "未推送"
        case 1:
          return "已推送"
        case 2:
          return "推送失败"
        default:
          return cellValue
      }
    },
    initVerifyStatus(row, column, cellValue, index) {
      switch(cellValue){
        case 1:
          return "未生成"
        case 2:
          return "审批中"
        case 3:
          return "审批完成"
        case 4:
          return "审批失败待提交"
        default:
          return cellValue
      }
    },
    initTime(row, column, cellValue, index) {
      if(!isNaN(Number(cellValue))){
        return utils.getTimeString(cellValue)
      }else{
        return cellValue
      }
    },
    lanuchCheck(id) {
      this.axios.post(api.LANUCHCHECK, { id: id }).then((res) => {
        if (res.data.code == 200) {
          this.$alert('操作成功', '提示', {
            type: 'success',
            confirmButtonText: '确定',
            callback: action => {
              this.listData();
            }
          });
        }
      }).catch((error) => {
        console.log(error);
      })
    },
    selectInit(row, index) {
      if (row.verifyStatus == 1 || row.verifyStatus == 4) {
        return true
      } else {
        return false
      }
    },
    dedupe(array){
        return Array.from(new Set(array));
    },
    batchPay() {

      if (this.selectArr.length == 0) {
        this.warn("请选择要生成支付清单的条目");
        return;
      }
      if(this.dedupe(this.payTypesss).length>1){
        this.warn("付款用途不一样不能生成支付清单");
      }else{
        this.$router.push({
            path: "/payordercheck",
            query: {
                ids:this.codess,
                type:"view"
            }
        })
      }

    },
    orderdetail(id) {
      this.$router.push({
        path: "/payorderdetail",
        query: {
          id: id
        }
      })
    },
    tableSortChange(column) {
      if (column.order == "descending") {
        this.params.sort = "DESC";
        this.listData();
      } else {
        this.params.sort = "ASC";
        this.listData();
      }
    }
  },
  activated(){
    this.payTypesss=[];
    if(this.$route.query.payStatus){
         this.params.payStatus.push(this.$route.query.payStatus)
         this.params.devId=this.$route.query.devId;
         this.params.pushType=this.$route.query.pushType;
     }

    this.laodTabData();
    this.listData();
  },
  mounted() {
     if(this.$route.query.payStatus){
         this.params.payStatus.push(this.$route.query.payStatus)
         this.params.devId=this.$route.query.devId;
         this.params.pushType=this.$route.query.pushType;
     }
    this.laodTabData();
    this.listData();
  }
}

</script>
<style lang="stylus">
.paid-list {
  .tabs {
    margin-bottom: 30px;

    .span {
      color: red;
    }

    .active {
      color: #fff;
    }
  }

  .selectItem {
    padding: 5px 0;
    background-color: #ecf5ff;
    font-size: 14px;
    text-indent: 10px;
    border-radius: 5px;
    margin-bottom: 5px;

    span {
      color: #409eff;
    }
  }

  .el-table .warning-row {
    background: #FFDEC7;
  }
}
.crux{

  color:orange
}
</style>
